<template>
  <div class="medium-hls-player">
    <div class="player-header">
      <h3 class="player-title">摄像头画面</h3>
      <!-- 取消按钮 -->
      <button class="cancel-btn" @click="handleCancel" title="取消">
        <img src="/叉掉.svg" alt="取消" class="cancel-icon" />
      </button>
    </div>

    <div class="video-wrapper">
      <video
        ref="videoPlayer"
        class="video-js vjs-big-play-centered"
        controls
        preload="auto"
      ></video>
      <button
        v-if="showPlayButton"
        class="play-overlay-btn"
        @click="handleManualPlay"
      >
        点击播放
      </button>
    </div>
    
    <div class="controls-container">
      <div class="quality-controls">
        <button 
          @click="switchQuality('hd')" 
          :class="{ active: currentQuality === 'hd' }"
          class="quality-btn"
        >
        </button>

      </div>
    </div>
  </div>
</template>

<script>
import videojs from 'video.js';
import 'video.js/dist/video-js.css';

export default {
  name: 'MediumHlsPlayer',
  emits: ['cancel'], // 声明emit事件
  data() {
    return {
      player: null,
      currentQuality: 'hd',
      showPlayButton: false,
      sources: {
        hd: 'https://live-hls-tums.tplinkcloud.com.cn:8100/store/ad4f2b2dda7dfe26/1/553952cd/playlist.m3u8?uuid=553952cd',
        sd: 'https://live-hls-tums.tplinkcloud.com.cn:8100/store/ad4f2b2dda7dfe26/0/bca3b262/playlist.m3u8?uuid=bca3b262'
      },
      options: {
        autoplay: false,
        controls: true,
        responsive: true,
        fluid: true,
        sources: [{
          src: '',
          type: 'application/x-mpegURL'
        }]
      }
    };
  },
  computed: {
    currentSource() {
      return this.sources[this.currentQuality];
    }
  },
  mounted() {
    this.initializePlayer();
    this.player.play().then(() => this.showPlayButton = false);
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose();
    }
  },
  methods: {
    initializePlayer() {
      this.options.sources[0].src = this.currentSource;
      this.player = videojs(this.$refs.videoPlayer, this.options);
      
      this.player.on('error', (error) => {
        if (error.code === 4 && error.message.includes('play() request was interrupted')) {
          setTimeout(() => {
            this.player.play().catch(() => this.showPlayButton = true);
          }, 500);
        }
      });
    },
    
    async switchQuality(quality) {
      if (quality === this.currentQuality) return;
      
      this.currentQuality = quality;
      this.showPlayButton = false;
      const wasPlaying = !this.player.paused();
      const currentTime = this.player.currentTime();
      
      this.player.pause();
      this.player.src({ src: this.currentSource, type: 'application/x-mpegURL' });
      
      await new Promise(resolve => this.player.one('loadedmetadata', resolve));
      this.player.currentTime(currentTime);
      
      if (wasPlaying) {
        this.player.play().catch(() => this.showPlayButton = true);
      }
    },
    
    handleManualPlay() {
      this.player.play().then(() => this.showPlayButton = false);
    },

    // 处理取消按钮点击事件
    handleCancel() {
      // 停止视频播放
      if (this.player) {
        this.player.pause();
      }
      // 向父组件发送取消事件
      this.$emit('cancel');
    }
  }
 
};
</script>

<style scoped>
.medium-hls-player {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: #333;
}

/* 播放器头部样式 */
.player-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  position: relative;
}

.player-title {
  margin: 0;
  font-size: 16px;
  color: #444;
  flex: 1;
  text-align: center;
}

/* 取消按钮样式 */
.cancel-btn {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
}

.cancel-btn:hover {
  background-color: rgba(255, 68, 68, 0.1); /* 红色背景 */
  opacity: 1;
  transform: translateY(-50%) scale(1.1);
}

.cancel-btn:hover .cancel-icon {
  /* 将取消图标变为红色 */
  filter: brightness(0) saturate(100%) invert(27%) sepia(96%) saturate(7471%) hue-rotate(3deg) brightness(103%) contrast(97%);
}

.cancel-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  transition: filter 0.2s ease;
}

.video-wrapper {
  position: relative;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 10px;
  flex: 1;
}

.video-js {
  width: 100%;
  height: 100%;
  min-height: 200px;
}

.controls-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: #f8f8f8;
  border-radius: 4px;
  margin-top: auto;
}

.quality-controls {
  display: flex;
  gap: 10px;
}

.quality-btn {
  padding: 6px 12px;
  font-size: 13px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  transition: all 0.2s;
}

.quality-btn:hover {
  border-color: #aaa;
}

.quality-btn.active {
  background: #42b983;
  color: white;
  border-color: #42b983;
}

.source-info {
  font-size: 13px;
  color: #666;
}

.quality-label {
  font-weight: bold;
  color: #42b983;
}

.play-overlay-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 8px 16px;
  background: rgba(0,0,0,0.7);
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s;
}

.play-overlay-btn:hover {
  background: rgba(66,185,131,0.9);
  transform: translate(-50%, -50%) scale(1.05);
}
</style>